<template>
	<view class="main">
		<image src="../../../static/img/login.jpg" class="background"></image>
		<view class="login">
			<view style="width: 80%; height: 30%;">
				<input placeholder="请输入你的手机号" class="input" placeholder-style="color:#4b4b4b" v-model="phone" />
			</view>
			<view style="width: 80%; height: 30%;">
				<input password placeholder="请输入你的密码" class="input" placeholder-style="color:#4b4b4b" v-model="password" />
			</view>
			<view style="width: 80%; height: 30%; display: flex;">
				<input placeholder="请输入验证码" class="input" placeholder-style="color:#4b4b4b"
					v-model="verificationCode" style="width: 60%;" />
				<view v-if="countDown > 0"
					style="font-size: 20rpx; height: 100%; display: flex; align-items: center; justify-content: right; width: 40%;">
					{{ countDown }}秒后重试
				</view>
				<view v-else
					style="font-size: 20rpx; height: 100%; display: flex; align-items: center; justify-content: right; width: 40%;"
					@click="sendVerificationCode">
					发送验证码
				</view>
			</view>
			<view style="display: flex; width: 100%;">
				<button style="margin-right: 15%;" class="button" @click="register">确定</button>
				<button style="margin-left: 15%;" class="button" @click="ToLogin">返回</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '', // 手机号
				password: '', // 密码
				verificationCode: '', // 验证码
				countDown: 0, // 倒计时
				timer: null, // 计时器
			};
		},
		methods: {
			sendVerificationCode() {
				if(this.phone==''){
					uni.showToast({
						title:'手机号不能为空',
						icon:'error'
					})
				}else{
					if (this.countDown > 0) {
						return; // 正在倒计时中，不进行发送操作
					}
					// 调用发送验证码接口
					uni.request({
						url: 'http://localhost:8081/userAuth/sendCode/3/1',
						data: {
							username: this.phone,
						},
						success: (res) => {
							console.log(res);
							if (res.data.flag === true) {
								this.startCountDown(); // 发送成功后开始倒计时
							}else{
								uni.showToast({
									title: res.data.message,
									icon:'error'
								})
							}
						},
					});
				}
			},
			startCountDown() {
				this.countDown = 60; // 设置初始倒计时时间为60秒
				this.timer = setInterval(() => {
					if (this.countDown > 0) {
						this.countDown--; // 倒计时递减
					} else {
						clearInterval(this.timer); // 清除计时器
					}
				}, 1000);
			},
			register() {
				// 调用注册接口
				uni.request({
					url: 'http://localhost:8081/userAuth/register/3',
					method: 'POST',
					data: {
						code: this.verificationCode,
						password: this.password,
						username: this.phone,
					},
					success: (res) => {
						uni.showToast({
							title:'注册成功'
						})
					},
				});
			},
			ToLogin() {
				uni.redirectTo({
					url: "/pages/View/login/login",
				});
			},
		},
	};
</script>

<style>
	.main {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: white;
	}

	.background {
		object-fit: contain;
		width: 100%;
	}

	.login {
		position: absolute;
		width: 80%;
		height: 30%;
		background-color: rgba(197, 197, 197, 0.2);
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* 输入框 */
	.input {
		width: 100%;
		height: 100%;
	}

	.button {
		font-size: 30rpx;
		width: 25%;
		height: 60rpx;
		background-color: rgba(121, 121, 121, 0.2);
		margin-top: 20rpx;
	}
</style>
